<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>query</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<style>
.layui-input-search{
    display: block;
    width: 50%;
    padding-left: 10px;
    z-index:10000;
}

.layui-btn-search{
    padding-left: 50%;
    z-index:-1;
}
</style>

<style>
/* 示例 */
.layui-field-title{margin-top: 30px;}
.grid-demo{padding: 10px; line-height: 50px; text-align: center; background-color: #79C48C; color: #fff;}
.grid-demo-bg1{background-color: #63BA79;}
.grid-demo-bg2{background-color: #49A761;}
.grid-demo-bg3{background-color: #38814A;}
</style>
<body>
<hr class="layui-bg-green">
<hr class="layui-bg-red">
<form id="queryForm"  action="#" method="post">
  <input type="text" id="parmStr" value="" name="parmStr" lay-verify="title" autocomplete="off" placeholder="请输入检索关键字" class="layui-input layui-input-search">
</form>

<div class="layui-btn-search" style="margin-top: 20px; margin-bottom: 0;">
		  <button id="quickStartBtn" class="layui-btn site-demo-active" data-type="setAll">&nbsp;搜&nbsp;&nbsp;索&nbsp;</button> 
		  <!-- <button class="layui-btn site-demo-active" data-type="setPercent">设置50%</button>
		  <button class="layui-btn site-demo-active" data-type="loading">模拟loading</button> -->
</div>

	    
<hr class="layui-bg-red">

<br>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
  <div class="layui-progress-bar layui-bg-red" lay-percent="0%"></div>
</div>
检索结果
 <div class="layui-row">
    <div class="layui-col-xs6">
      <div class="grid-demo grid-demo-bg1 rid-demo layui-bg-red" id="SUMID">结果总数/个：0</div>
    </div>
    <div class="layui-col-xs6">
      <div class="grid-demo" id="searchTimeId">检索耗时/秒：0</div>
    </div>
  </div>
 <iframe id="ifameTableId" src=""
  marginwidth="0" marginheight="0"  height="650px" width="100%" border="0" height="100%" frameborder="no" style="border:0px; margin:0px;padding:0px;">
 </iframe>
 
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:90px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>

<!-- 临时存放检索返回的json数据 -->
<input type="hidden" value="" id="indexShowData"/>

<script src="layui.js" charset="utf-8"></script>
<script src="js/jquery-1.10.2.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
$("#parmStr").focus();

document.onkeydown = function (event) {
    var e = event || window.event;
    if (e && e.keyCode == 13) { //回车键的键值为13
        alert("good");
        quickStartQuery();
    }
};

layui.use('element', function(){
    var $ = layui.jquery
    ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
    var layer = layui.layer;
    //触发事件
    var active = {
      setPercent: function(){
        //设置50%进度
        element.progress('demo', '50%');
        openDialog();
      }
      ,setAll: function(){
          
          $.fn.serializeJson = function () {
              var serializeObj = {};
              $(this.serializeArray()).each(function () {
                  serializeObj[this.name] = this.value;
              });
          	  return serializeObj;
     	  };
     	  
     	 $.ajax({
    	   url: '/opensearch/api/search/simple'
    	  ,data:$('#queryForm').serializeJson()
    	  ,success: function(mydata){
    	  	  var tableContent = JSON.stringify(mydata.data);
    	  	  //console.log(tableContent);
    	  	  $("#searchTimeId").html("检索耗时/秒："+mydata.searchtime);
      	  	  $("#SUMID").html("结果总数/个:"+mydata.count);
    	  	  $("#indexShowData").val(tableContent);
    	  	
    	  	  var _url = "/opensearch/index/table.html";
    	  	  $("#ifameTableId").attr("src",_url);
    	  }
    	  ,dataType: 'JSON'
          });
     	  $("#parmStr").focus();
          element.progress('demo', '90%');
          
      }
      ,loading: function(othis){
        var DISABLED = 'layui-btn-disabled';
        if(othis.hasClass(DISABLED)) return;
      
        //模拟loading
        var n = 0, timer = setInterval(function(){
          n = n + Math.random()*10|0;  
          if(n>100){
            n = 100;
            clearInterval(timer);
            othis.removeClass(DISABLED);
          }
          element.progress('demo', n+'%');
        }, 300+Math.random()*1000);
        
        othis.addClass(DISABLED);
      }
    };
    
    $('.site-demo-active').on('click', function(){
      var othis = $(this), type = $(this).data('type');
      active[type] ? active[type].call(this, othis) : '';
    });
  });
  
  function quickStartQuery(){
      
      
      $.fn.serializeJson = function () {
          var serializeObj = {};
          $(this.serializeArray()).each(function () {
              serializeObj[this.name] = this.value;
          });
      	  return serializeObj;
 	  };
 	  
 	 $.ajax({
	   url: '/opensearch/api/search/simple'
	  ,data:$('#queryForm').serializeJson()
	  ,success: function(mydata){
	  	  var tableContent = JSON.stringify(mydata.data);
	  	  //console.log(tableContent);
	  	  $("#searchTimeId").html("检索耗时/秒："+mydata.searchtime);
  	  	  $("#SUMID").html("结果总数/个:"+mydata.count);
	  	  $("#indexShowData").val(tableContent);
	  	
	  	  var _url = "/opensearch/index/table.html";
	  	  $("#ifameTableId").attr("src",_url);
	  }
	  ,dataType: 'JSON'
      });
 	alert("gooddd");
 	
 	/* var mydata='{"status":"OK","request_id":"152957872719724828535575","result":{"searchtime":0.008088,"total":77,"num":10,"viewtotal":77,"compute_cost":[{"index_name":"searchApp","value":0.625}],"items":[{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山商业, 通讯地址：佛山市南海区九江镇大正路北2号信基广场, , , , , , , ]","id":"60040","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山商业]","id":"60039","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50032","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50035","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50030","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50036","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50024","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50031","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50033","tag":"2018-06-20 18:24:01","index_name":"searchApp"},{"author":"F:\\验证类项目\\tmpExcel解析导入openSearch\\2\\广东信基集团2018.04.xls","body":"[sheetName,佛山片区, , , , , ]","id":"50020","tag":"2018-06-20 18:24:01","index_name":"searchApp"}],"facet":[]},"errors":[],"tracer":""}';
     var _obj = eval('(' + mydata + ')');
     var _searchResult = _obj.result;
 	  var tableContent = JSON.stringify(_searchResult.items);
 	  //console.log(tableContent);
 	  $("#searchTimeId").html("检索耗时/秒："+_searchResult.searchtime);
 	  if(_searchResult.total >0){
 	  	  $("#SUMID").html("结果总数/个:"+_searchResult.total);
	  	  $("#indexShowData").val(tableContent);
 	  }
 	
 	  var _url = "/opensearch/index/table.html?showData="+"";
 	  $("#ifameTableId").attr("src",_url); */
	  //console.log(_obj);
 	  
 	$("#parmStr").focus();
 	return false;
  }
</script>

</body>
</html>